.wpcom-charmap__dialog.dialog.card {
	padding: 0 24px;

	.dialog__content {
		height: 70vh;
		margin: 0 -24px;
		padding: 16px 8px 16px 24px;
		overflow-y: auto;
		transform: translateZ( 0 );
		pointer-events: all;
	}

	.dialog__action-buttons {
		margin: 0 -24px;
	}

	@include breakpoint( '>660px' ) {
		max-width: 700px;
	}
}

.wpcom-charmap__table {
	margin: 10px 0;
}

.wpcom-charmap__heading {
	font-size: 24px;
}

.wpcom-charmap__character {
	border: 1px solid var( --color-neutral-0 );
	margin: 0 -1px -1px 0; /* prevent borders from doubling up at overlap */
	padding: 8px;
	float: left;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}

.wpcom-charmap__character:hover {
	background-color: var( --color-neutral-50 );
	color: var( --color-text-inverted );
}
